  <!DOCTYPE HTML>
  <html lang="zh-CN">
  	<head>
  		<meta charset="UTF-8">
  		<title>个人博客</title>
  		<meta name="keywords" content="个人博客" />
  		<meta name="description" content="" />
  		<link rel="stylesheet" href="css/index.css" />
  		<link rel="stylesheet" href="css/style.css" />
  		<script type="text/javascript" src="js/jquery1.42.min.js"></script>
  		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
  		<!--[if lt IE 9]>
  <script src="js/html5.js"></script>
  <![endif]-->
  	</head>
  
  	<body>
  		<!--header start-->
  		<div id="header">
  			<h1>刘明明个人博客</h1>
  			<p>青春是打开就合不上的书；人生是踏上了就回不了头的路，技术是不用就会忘记的赌注。</p>
  		</div>
  		<!--header end-->
  		<!--nav-->
  		<div id="nav">
  			<ul>
  				<li><a href="../index.html">首页</a></li>
  				<li><a href="../learn.html">学无止境</a></li>
  				<li><a href="../riji.html">个人日记</a></li>
  				<li><a href="../shuo.html">碎言碎语</a></li>
  				<li><a href="../xc.html">相册展示</a></li>
  				<li><a href="../about.html">关于我</a></li>
  				<div class="clear"></div>
  			</ul>
  		</div>
  		<!--nav end-->
  		<!--content start-->
  		<div id="content">
  			<!--left-->
  			<div class="left" id="c_left">
  				<div class="s_tuijian">
  					<h2>文章<span>推荐</span></h2>
  				</div>
  				<div class="content_text"> 
  				<div>
  					<h1  class="title-h1" style="font-size: 20px;font-weight: 500;color: #0088db;text-align: center;padding: 10px 0;"> 前端MVVM框架之“Vue.js组件篇” </h1> 
  				</div>		 
  				<div data-v-de0d029a="" class="content"><p style="text-indent: 2em; text-align: left;">前言: 相信看过上一篇“<a href="http://www.duanliang920.com/learn/web354.html" target="_blank" style="color: rgb(0, 112, 192); text-decoration: underline;"><span style="color: rgb(0, 112, 192);">Vue.js入门</span></a>”的同学，对Vue大概有了一定程度上的了解。废话不多说，今天我们接着聊Vue的组件系统!</p><p style="text-indent: 2em; text-align: left;">为什么说：“组件系统是Vue中一个核心的功能呢？<span style="text-indent: 32px;">”</span></p><p style="text-indent: 2em; text-align: left;">因为它能帮助我们，提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，<span style="text-indent: 2em;">解决了我们传统项目开发：<strong>效率低</strong>、<strong>难维护</strong>、<strong>复用性</strong>等问题...</span></p><p style="text-indent: 2em; text-align: left;">到底vue的组件系统有什么魅力呢？让我们一起来看看：</p><p style="text-indent: 2em; text-align: left;"><span style="font-size: 18px;"><strong><span style="color: rgb(255, 0, 0);">一、声明组件</span></strong></span></p><p style="text-indent: 2em; text-align: left;">1、普通组件声明方式</p><p style="text-indent: 2em; text-align: left;">在引用vue.js后，首先我们会实例化一个Vue的实例。如下:</p><pre class=" language-js"><code class=" language-js"><span class="token keyword">var</span> Vue <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre><p style="text-indent: 2em; text-align: left;">然后在声明组件，如下:</p><pre class="brush:js;toolbar:false"><pre class=" language-js"><code class=" language-js">Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">'组件名称'</span><span class="token punctuation">,</span><span class="token punctuation">{</span>配置项<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></pre><p style="text-indent: 2em; text-align: left;margin-left:25px;"><img src="./m2_files/1484573857297682.jpg" title="Vue components" alt="Vue components" style="max-width:100%;"></p><p style="text-indent: 2em; text-align: left;margin-left:40px;"><br></p><p style="text-indent: 2em; text-align: left;">我们声明好组件后，如何去调用呢? 伪代码如下:</p><pre class=" language-js"><code class=" language-js"><span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"parentBox"</span><span class="token operator">&gt;</span>
  				  <span class="token operator">&lt;</span>my<span class="token operator">-</span>component<span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>my<span class="token operator">-</span>component<span class="token operator">&gt;</span> <span class="token comment">//调用声明的组件</span>
  				<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span></code></pre><p style="text-indent: 2em; text-align: left;"><br></p><p style="text-indent: 2em; text-align: left;"><span style="color: rgb(255, 0, 0);">注意：</span>所有声明的组件名称中，包含有驼峰写法的组件，得修改成“<span style="color: rgb(255, 0, 0);">-</span>”。<span style="text-indent: 2em;">比如：你的组件名称为:“MyComponent”。那么调用为my-component。</span></p><p style="text-indent: 2em; text-align: left;"><span style="text-indent: 2em;"><br></span></p><p style="text-indent: 2em; text-align: left;">2、单文件组件声明<span style="text-indent: 32px;">方式</span></p><p style="text-indent: 2em; text-align: left;">可能有些朋友会问:“<strong>什么是单文件组件呢?</strong>”</p><p style="text-indent: 2em; text-align: left;">通俗点说：就是以<span style="color: rgb(255, 0, 0);">.Vue</span>文件名结尾的组件称为“单文件组件”。如下图:</p><p style="text-indent: 2em; text-align: left;"><br></p><p style="text-indent: 2em; text-align: left;margin-left:55px;"><img src="./m2_files/1484573961119966.jpg" title="单文件组件" alt="单文件组件"></p><p style="text-indent: 2em; text-align: left;margin-left:80px;"><br></p><p style="text-indent: 2em; text-align: left;">在一个<span style="color: rgb(255, 0, 0);">.Vue</span>文件中&nbsp;</p><pre class=" language-js"><code class=" language-js"><span class="token number">1</span>、样式：style 
  				
  				<span class="token number">2</span>、内容：template 
  				
  				<span class="token number">3</span>、行为：script 三者分离。</code></pre><p style="text-indent: 2em; text-align: left;">可能我们传统开发组件时，还需要把css、JavaScript、html三者分开来写。而在Vue的单文件组件中却让三者在一起了，这样就变得更加像一个单独的模块。</p><p style="text-indent: 2em; text-align: left;">传统开发一个组件可能是这样，如图所示：</p><p style="text-indent: 2em; text-align: left;"><br></p><p style="text-indent: 2em; text-align: left;"><img src="./m2_files/1484575426101936.png" title="1484575426101936.png" alt="old-components.png"></p><p style="text-indent: 2em; text-align: left;"><span style="text-indent: 2em;"><br></span></p><p style="text-indent: 2em; text-align: left;"><span style="color: rgb(255, 0, 0); font-size: 18px;"><strong>二、组件通信</strong></span></p><p style="text-indent: 2em; text-align: left;">我们可能在思考一个问题：如果把一个页面抽象若干个组件模块后，组件与组件的数据该如何传递呢？它们又是如何接受数据的呢？...</p><p style="text-indent: 2em; text-align: left;">别急，我们一起来看看在vue中，组件是如何通信的。</p><p style="text-indent: 2em; text-align: left;">1、父子通信(父子关系)</p><p style="text-indent: 2em; text-align: left;margin-left:140px;"><img src="./m2_files/1484574053107529.jpg" title="父子通信" alt="父子通信"></p><p style="text-indent: 2em; text-align: left;"><br></p><p style="text-indent: 2em; text-align: left;">从上图可以看到</p></div>
  				
  				</div>
  				<!---->
  				
           </div>
           <!--left end-->
           <!--right-->
           <div class="right" id="c_right">
            <div class="s_about">
            <h2>关于博主</h2>
             <img src="images/my.jpg" width="230" height="230" alt="博主"/>
             <p>博主：青牛大师</p>
             <p>职业：前端交互、java技术栈</p>
             <p>爱好：旅游、K歌</p>
             <p>简介：80后屌丝，一个草根程序员，喜欢研究web前端交互技术和java应用技术。</p>
             <div class="clear"></div>
             </p>
            </div>
            <!--栏目分类-->
             <!--end-->
             
            <div class="link">
             <h2>收藏链接</h2>
             <p><a href="https://www.oschina.net/question/565065_86020">Java 数组转型和范型</a></p>
             <p><a href="https://www.oschina.net/question/3939240_2316318">Java 泛型擦除</a></p> 
             <p><a href="https://my.oschina.net/u/4001573/blog/3218016">Java之异常处理</a></p> 
             <p><a href="https://my.oschina.net/PerfMa/blog/3198061">JVM源码分析之堆外内存完全解读</a></p> 
            			<p><a href="https://my.oschina.net/OutOfMemory/blog/4272077">Dubbo分析之心跳设计</a></p>
            </div>
           </div>
           <!--right end-->
           <div class="clear"></div>
      </div>
      <!--content end-->
      <!--footer start-->
      <div id="footer">
       <p>Design by:青牛大师</p>
       <p><a href="http://www.miitbeian.gov.cn" target="_black">苏ICP备20027343号</a></p>
      </div>
      <!--footer end-->
      <script type="text/javascript">jQuery(".lanmubox").slide({easing:"easeOutBounce",delayTime:400});</script>
      <script  type="text/javascript" src="js/nav.js"></script>
  
  </body>
  </html>
  
